<template>
  <div class="histotyhot">
      <div class="his-hot">
        <div class="his-top">
             <h4>历史记录</h4>
             <van-icon name="delete" @click="clearHistory"/>
        </div>
       <div class="his-bt">
            <van-tag plain type="default" @click="tagClick(item)" v-for="(item,index) in historyKeywordList" :key="index">{{item}}</van-tag>
       </div>
      </div>
      <div class="his-hot">
        <div class="his-top">
             <h4>热门搜索</h4>
        </div>
       <div class="his-bt">
            <van-tag plain type="default" @click="tagClick(item.keyword)" v-for="(item,index) in hotKeywordList" :key="index" :class="item.is_hot==1? 'red':'' ">{{item.keyword}}</van-tag>
       </div>
      </div>
  </div>
</template>

<script>
import {ClearHistory} from "@/utils/api"
export default {
  data(){
    return{

    }
  },
  mounted(){
    ClearHistory().then(res=>{
      console.log(res)
    })
  },
  methods: {
    tagClick(val){
        this.$emit('tagClick',val)
    },
    clearHistory(){
       ClearHistory().then(res=>{
         if(res.data.errno==0){
             this.$toast.success('删除成功');
         }
    })
    }
  },
  props:["historyKeywordList","hotKeywordList"]
}
</script>

<style lang="scss" scoped>
  // .histotyhot{
  //   width: 100%;
  //   height: 100%;
  // }
  .his-hot{
     padding: 1rem;
     margin-bottom: 1rem;
     background: #fff;
  }
  .his-top{
   
    display: flex;
    justify-content: space-between;
   
    margin-bottom: 1rem;
    background: #fff;
  }
  .his-bt{
    width: 100%;
    display: flex;
    flex-wrap: wrap;

  }
  .van-tag{
    padding:0;
    margin-right:.3rem;
    margin-bottom: .2rem;
  }
  .red{
    color: crimson;
  }
</style>